import { useEffect, useState } from 'react'
import logo from './logo.svg'
import Header from './Header'
import './App.css'
import Loader from './Loader'
import Results from './Results'
import axios from 'axios'
function App() {
  // 数据驱动的页面
  const [beers,setBeers] = useState([
  ])
  // 自有状态，加载效果
  const [loading, setLoading] = useState(true)
  useEffect(()=> {
    // 优先显示页面  延后加载数据
    (async function() {
      // json-server 早期用
      // fast mock 提供在线接口伪造工具
      // api 调用 
      const data = await axios.get('https://www.fastmock.site/mock/e7ebe2913686274082d1afac39c04d20/beers/list')
      //const data = await response.json()
      setBeers(data.data.beers)
      setLoading(false)
    })()
  })
  return (
    <div className="wrapper">
     {/* 组件化思维 状态思维 */}
     {/* 非自有的props 其实让组件更好的复用 及协作 */}
     <Header siteName ="Beer me!"/>
      {/* 出现 不出现  状态组件  页面动态的一种状态 */}
     {loading && <Loader message = "正在加载啤酒列表..."/>}
     <Results beers ={beers} loading = {loading}/>
    </div>
  )
}

export default App
